<template>
  <div style="padding: 5px;width: 100%;height: 100%">
    <table class="mytable_pccenter3">
      <tr>
        <th style="width: 25%">事业部</th>
        <th style="width: 30%">延期完工次数</th>
        <th style="width: 30%">延期完工产量</th>
        <th style="width: 20%">完工率</th>
      </tr>
      <tr>
        <td>风能装备</td>
        <td>3</td>
        <td>32.5吨</td>
        <td>98.6%</td>
      </tr>
      <tr>
        <td>核能装备</td>
        <td>2</td>
        <td>31.8吨</td>
        <td>99.2%</td>
      </tr>
      <tr>
        <td>海工装备</td>
        <td>2</td>
        <td>22.5吨</td>
        <td>98.3%</td>
      </tr>
      <tr>
        <td>调质钢</td>
        <td>1</td>
        <td>8.5吨</td>
        <td>99.4%</td>
      </tr>
      <tr>
        <td>传动装备</td>
        <td>4</td>
        <td>15.5吨</td>
        <td style="color:#f10631">97.7%</td>
      </tr>
      <tr>
        <td>合计</td>
        <td>1</td>
        <td>98.3吨</td>
        <td>98.8%</td>
      </tr>
    </table>
  </div>
</template>

<script setup name="pcleft2">
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";
import * as echarts from 'echarts';
const state = reactive({
})
</script>

<style scoped lang="scss">
table.mytable_pccenter3{
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
  text-align: left;
  table-layout: fixed;
  font-size: 14px;
  td,
  th{
    border: 1px solid #cccccc;
    color: #00fbfe;
    height: 18px;
    line-height: 18px;
    word-break: break-all;
    word-wrap: break-word;
    text-indent: 2px;
    padding: 3px;
  }
  th{
    background-color: #00fbfe;
    color: #333333;
    font-weight: 800;
  }
  td{
    background:none;
  }
}
@media screen and (min-width: 1921px) and (max-width: 2560px) {
  table.mytable_pccenter3 tr th{
    height: 30px !important;
    line-height: 30px !important;
  }
  table.mytable_pccenter3 tr td{
    height: 30px !important;
    line-height: 30px !important;
  }
}
</style>
